<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Prettify Syntax Highlighter</title>
<link href="gcode-reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{
    font-family: Arial;
    font-size: 83%;
    font-size: 86%;
}
.bb{display:block;height:20px;}
.wrap{
    width: 98%;
    margin: 20px auto;
}
pre {
    font: normal 91% Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
    padding: 15px;
    margin:15px 0;
    white-space: pre-wrap;
    min-height: 100px;
    max-height: 350px;
    overflow: auto;
    border: 1px solid #bbb;
    background: #000;    
}
pre, code.prettyprint{
    border-radius: 6px;
}
code{
    font-size: 12px;
}




/* Pretty printing styles. Used with prettify.js. */
/* Dark theme by gubhugreyot */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; color: #999; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; color: #FAEBD7; } /* plaintext - AtiqueWhite */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

</style>

</head>

<body>


<div class="wrap">


Adding Prettyprint syntax highlighter :<br/>
<pre class="prettyprint">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt;Prettify Syntax Highlighting&lt;/title&gt;
&lt;head&gt;

&lt;style type="text/css&gt;
pre{
    font: normal 12px Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
    padding: 15px;
    margin: 15px 0;
    white-space: pre;
    min-height: 100px;
    max-height: 350px;
    overflow: auto;
    border: 1px solid #bbb;
    border-radius: 6px;
}

.prettyprint .str { color: #080; }
.prettyprint .kwd { color: #008; }
.prettyprint .com { color: #800; }
.prettyprint .typ { color: #606; }
.prettyprint .lit { color: #066; }
.prettyprint .pun { color: #660; }
.prettyprint .pln { color: #000; }
.prettyprint .tag { color: #008; }
.prettyprint .atn { color: #606; }
.prettyprint .atv { color: #080; }
.prettyprint .dec { color: #606; }

@media print {
  .prettyprint .str { color: #060; }
  .prettyprint .kwd { color: #006; font-weight: bold; }
  .prettyprint .com { color: #600; font-style: italic; }
  .prettyprint .typ { color: #404; font-weight: bold; }
  .prettyprint .lit { color: #044; }
  .prettyprint .pun { color: #440; }
  .prettyprint .pln { color: #000; }
  .prettyprint .tag { color: #006; font-weight: bold; }
  .prettyprint .atn { color: #404; }
  .prettyprint .atv { color: #060; }
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;pre class="prettyprint&gt;
code here!
&lt;/pre&gt;

&lt;pre&gt;&lt;code class="prettyprint"&gt;
Code here
&lt;/code&gt;&lt;/pre&gt;

&lt;script src=".../prettify.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    prettyPrint();
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;<span class="bb"></span></pre>


Example : Highlighting &raquo; Javascript<br/>
&lt;pre class="prettyprint"&gt; Code here &lt;/pre&gt;
<pre class="prettyprint">function unpack() {
    var p = G('txtPacked').value,
        c = "";
    if (p != "") {
        c = unescape(p);
        if (/eval\(+function\(/.test(c)) {
            var _e = eval;
            var s = "eval=function(v){c=v;};" + c + ";eval=_e;";
            eval(s);
        }
        c = R(c, {
            indent_size: 1,
            indent_char: '\t'
        });
    }
    G('txtUnpacked').value = unescape(c);
}
W(function () {
    addEvent(G('cmdUnpack'), 'click', unpack);
    addEvent(G('cmdClear'), 'click', function () {
        G('txtPacked').value = G('txtUnpacked').value = '';
    })
});</pre>

Example : <br/>
&lt;pre class="prettyprint"&gt;&lt;code class="language-c"&gt; Code here! &lt;/code&gt;&lt;/pre&gt;
<pre class="prettyprint"><code class="language-c">function unpack() {
    var p = G('txtPacked').value,
        c = "";
    if (p != "") {
        c = unescape(p);
        if (/eval\(+function\(/.test(c)) {
            var _e = eval;
            var s = "eval=function(v){c=v;};" + c + ";eval=_e;";
            eval(s);
        }
        c = R(c, {
            indent_size: 1,
            indent_char: '\t'
        });
    }
    G('txtUnpacked').value = unescape(c);
}
W(function () {
    addEvent(G('cmdUnpack'), 'click', unpack);
    addEvent(G('cmdClear'), 'click', function () {
        G('txtPacked').value = G('txtUnpacked').value = '';
    })
});</code></pre>

Example : Highlighting &raquo; Javascript<br/>
&lt;pre&gt;&lt;code class="prettyprint"&gt; Code here &lt;/code&gt;&lt;/pre&gt;
<pre><code class="prettyprint">
/**
 * nth element in the fibonacci series.
 * @param n >= 0
 * @return the nth element, >= 0.
 */
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.write(fib(10));</code></pre>



</div>
<!--
<script src="http://www.gstatic.com/codesite/ph/16186173366037945081/js/prettify/prettify.js"></script>
<script type="text/javascript">
prettyPrint();
</script>

<script src="http://google-code-prettify.googlecode.com/svn/branches/release-1-Jun-2011/js-modules/prettify.js type="text/javascript"></script>
<script src="js/gcode_prettify.js" type="text/javascript"></script>

-->

<script src="js/prettify.obus.js" type="text/javascript"></script>

<script type="text/javascript">
    prettyPrint();
</script>


</head>
</html>